<template>
    <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="formDisabled">
            <!-- 主表单区域 -->
            <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item label="客户id" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cusId">
                            <a-input v-model="model.cusId" placeholder="请输入客户id"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="客户姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cusName">
                            <a-input v-model="model.cusName" placeholder="请输入客户姓名"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="客户电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cusTel">
                            <a-input v-model="model.cusTel" placeholder="请输入客户电话"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="客户地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cusAddress">
                            <a-input v-model="model.cusAddress" placeholder="请输入客户地址"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="客户课题组" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cusKtz">
                            <a-input v-model="model.cusKtz" placeholder="请输入客户课题组"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="客户邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cusEmail">
                            <a-input v-model="model.cusEmail" placeholder="请输入客户邮箱"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="客户发票" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cusCompany">
                            <a-input v-model="model.cusCompany" placeholder="请输入客户发票"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="订单状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
                            <j-dict-select-tag type="list" v-model="model.status" dictCode="bus_order_status"
                                               placeholder="请选择订单状态"/>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </j-form-container>
        <!-- 子表单区域 -->
        <a-tabs v-model="activeKey" @change="handleChangeTabs">
            <a-tab-pane tab="订单明细" :key="refKeys[0]" :forceRender="true">
                <j-editable-table
                        :ref="refKeys[0]"
                        :loading="busOrderItemTable.loading"
                        :columns="busOrderItemTable.columns"
                        :dataSource="busOrderItemTable.dataSource"
                        :maxHeight="300"
                        :disabled="formDisabled"
                        :rowNumber="true"
                        :rowSelection="true"
                        :actionButton="true"/>
            </a-tab-pane>
            <a-tab-pane tab="订单图片" :key="refKeys[1]" :forceRender="true">
                <j-editable-table
                        :ref="refKeys[1]"
                        :loading="busOrderPicsTable.loading"
                        :columns="busOrderPicsTable.columns"
                        :dataSource="busOrderPicsTable.dataSource"
                        :maxHeight="300"
                        :disabled="formDisabled"
                        :rowNumber="true"
                        :rowSelection="true"
                        :actionButton="true"/>
            </a-tab-pane>
        </a-tabs>
    </a-spin>
</template>

<script>

    import {getAction} from '@/api/manage'
    import {FormTypes, getRefPromise, VALIDATE_NO_PASSED} from '@/utils/JEditableTableUtil'
    import {JEditableTableModelMixin} from '@/mixins/JEditableTableModelMixin'
    import {validateDuplicateValue} from '@/utils/util'

    export default {
        name: 'BusOrderForm',
        mixins: [JEditableTableModelMixin],
        components: {},
        data() {
            return {
                labelCol: {
                    xs: {span: 24},
                    sm: {span: 6},
                },
                wrapperCol: {
                    xs: {span: 24},
                    sm: {span: 16},
                },
                labelCol2: {
                    xs: {span: 24},
                    sm: {span: 3},
                },
                wrapperCol2: {
                    xs: {span: 24},
                    sm: {span: 20},
                },
                model: {
                    status: 1,
                },
                // 新增时子表默认添加几行空数据
                addDefaultRowNum: 1,
                validatorRules: {
                    cusId: [
                        {required: true, message: '请输入客户id!'},
                    ],
                    cusName: [
                        {required: true, message: '请输入客户姓名!'},
                    ],
                    cusTel: [
                        {required: true, message: '请输入客户电话!'},
                    ],
                    cusAddress: [
                        {required: true, message: '请输入客户地址!'},
                    ],
                    cusKtz: [
                        {required: true, message: '请输入客户课题组!'},
                    ],
                    cusEmail: [
                        {required: true, message: '请输入客户邮箱!'},
                    ],
                    cusCompany: [
                        {required: true, message: '请输入客户发票!'},
                    ],
                    status: [
                        {required: true, message: '请输入订单状态!'},
                    ],
                },
                refKeys: ['busOrderItem', 'busOrderPics',],
                tableKeys: ['busOrderItem', 'busOrderPics',],
                activeKey: 'busOrderItem',
                // 订单明细
                busOrderItemTable: {
                    loading: false,
                    dataSource: [],
                    columns: [
                        {
                            title: '样本类型',
                            key: 'specType',
                            type: FormTypes.select,
                            dictCode: "bus_yangben_type",
                            width: "200px",
                            placeholder: '请输入${title}',
                            defaultValue: '',
                            validateRules: [{required: false}],
                        },
                        {
                            title: '样本数量',
                            key: 'specNum',
                            type: FormTypes.inputNumber,
                            width: "200px",
                            placeholder: '请输入${title}',
                            defaultValue: '',
                            validateRules: [{required: true, message: '${title}不能为空'}],
                        },
                    ]
                },
                // 订单图片
                busOrderPicsTable: {
                    loading: false,
                    dataSource: [],
                    columns: [
                        {
                            title: '图片url',
                            key: 'picUrls',
                            type: FormTypes.image,
                            token: true,
                            responseName: "message",
                            width: "200px",
                            placeholder: '请输入${title}',
                            defaultValue: '',
                            validateRules: [{required: true, message: '${title}不能为空'}],
                        },
                        {
                            title: '订单id',
                            key: 'orderId',
                            type: FormTypes.input,
                            width: "200px",
                            placeholder: '请输入${title}',
                            defaultValue: '',
                            validateRules: [{required: true, message: '${title}不能为空'}],
                        },
                    ]
                },
                url: {
                    add: "/order/busOrder/add",
                    edit: "/order/busOrder/edit",
                    queryById: "/order/busOrder/queryById",
                    busOrderItem: {
                        list: '/order/busOrder/queryBusOrderItemByMainId'
                    },
                    busOrderPics: {
                        list: '/order/busOrder/queryBusOrderPicsByMainId'
                    },
                }
            }
        },
        props: {
            //表单禁用
            disabled: {
                type: Boolean,
                default: false,
                required: false
            }
        },
        computed: {
            formDisabled() {
                return this.disabled
            },
        },
        created() {
        },
        methods: {
            addBefore() {
                this.busOrderItemTable.dataSource = []
                this.busOrderPicsTable.dataSource = []
            },
            getAllTable() {
                let values = this.tableKeys.map(key => getRefPromise(this, key))
                return Promise.all(values)
            },
            /** 调用完edit()方法之后会自动调用此方法 */
            editAfter() {
                this.$nextTick(() => {
                })
                // 加载子表数据
                if (this.model.id) {
                    let params = {id: this.model.id}
                    this.requestSubTableData(this.url.busOrderItem.list, params, this.busOrderItemTable)
                    this.requestSubTableData(this.url.busOrderPics.list, params, this.busOrderPicsTable)
                }
            },
            //校验所有一对一子表表单
            validateSubForm(allValues) {
                return new Promise((resolve, reject) => {
                    Promise.all([]).then(() => {
                        resolve(allValues)
                    }).catch(e => {
                        if (e.error === VALIDATE_NO_PASSED) {
                            // 如果有未通过表单验证的子表，就自动跳转到它所在的tab
                            this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index]
                        } else {
                            console.error(e)
                        }
                    })
                })
            },
            /** 整理成formData */
            classifyIntoFormData(allValues) {
                let main = Object.assign(this.model, allValues.formValue)
                return {
                    ...main, // 展开
                    busOrderItemList: allValues.tablesValue[0].values,
                    busOrderPicsList: allValues.tablesValue[1].values,
                }
            },
            validateError(msg) {
                this.$message.error(msg)
            },

        }
    }
</script>

<style scoped>
</style>
